* {
  margin: 0;
  padding: 0;
}
body {
  background-color: black;
}
.box {
  margin: 100px auto;
  position: relative;
  width: 500px ;
  height: 500px;
}
.box:hover .huaban:nth-child(1) {
  transform: rotate(45deg);
}
.box:hover .huaban:nth-child(2) {
  transform: rotate(75deg);
}
.box:hover .huaban:nth-child(3) {
  transform: rotate(15deg);
}
.box:hover .huaban:nth-child(4) {
  transform: rotate(105deg);
}
.box:hover .huaban:nth-child(5) {
  transform: rotate(-15deg);
}
.box:hover .huaban:nth-child(6) {
  transform: rotate(135deg);
}
.box:hover .huaban:nth-child(7) {
  transform: rotate(-45deg);
}
.box:hover .huaban:nth-child(1) {
  z-index: 5;
}
.box:hover .huaban:nth-child(2) {
  z-index: 4;
}
.box:hover .huaban:nth-child(3) {
  z-index: 4;
}
.box:hover .huaban:nth-child(4) {
  z-index: 3;
}
.box:hover .huaban:nth-child(5) {
  z-index: 3;
}
.box:hover .huaban:nth-child(6) {
  z-index: 2;
}
.box:hover .huaban:nth-child(7) {
  z-index: 2;
}
.box .huaban {
  width: 250px;
  height: 250px;
  background-color: #FFC5C8;
  opacity: 0.5;
  margin: 100px auto;
  border-bottom-left-radius: 100%;
  border-top-right-radius: 100%;
  transition: transform 2s;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
  position: absolute;
}
